<!DOCTYPE html>
<html>
<head>
    <meta content="text/html" charset="UTF-8">
    <title>jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="css/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="css/themes/icon.css"/>
    <link rel="stylesheet" href="css/themes/color.css"/>
    <link rel="stylesheet" type="text/css" href="css/mycss.css"/>
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
</head>
<body>
<div style="display: none">
    <div id="tb1">
        <a href="javascript:$news_msg.edatagrid('addRow')" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
        <a href="javascript:del_news_msg()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
        <a href="javascript:$news_msg.edatagrid('saveRow')" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存</a>
        <a href="javascript:$news_msg.edatagrid('cancelRow')" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true">取消</a>
    </div>
    <div id="win_news">

    </div>
</div>
<div class="easyui-layout" fit="true">
    <div data-options="region:'east',split:true" style="width:500px;">
        <div id="west_panel">
            <div class="datagrid-toolbar">
                <a href="javascript:$news_msg.edatagrid('addRow')" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
                <a href="javascript:del_news_msg()" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true">删除</a>
                <a href="javascript:$news_msg.edatagrid('saveRow')" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true">保存</a>
                <a href="javascript:$news_msg.edatagrid('cancelRow')" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true">取消</a>
            </div>
            <form id="ff" method="post">
                <div>
                    <label for="name">Name:</label>
                    <input class="easyui-textbox" type="text" name="name" data-options="required:true" />
                </div>
                <div>
                    <label for="email">Email:</label>
                    <input class="easyui-textbox" type="text" name="email" data-options="validType:'email'" />
                </div>
                ...
            </form>
        </div>
    </div>
    <div data-options="region:'center',border:false">
            <table id="news_msg"></table>
    </div>
</div>
<script type="text/javascript">
    var btn=$("<a href='javascript:btnss()'>你好</a>").linkbutton({iconCls:'icon-search',plain:true}).prop('outerHTML');
    var $news_msg=$('#news_msg');
    var $win_news=$('#win_news');
    var $west_panel=$('#west_panel');
    $west_panel.panel({
        fit:true,
        border:false
    });
    $win_news.window({
        width:600,
        height:400,
        //modal:true,
        draggable:true,
        closed : true
    });
    $news_msg.edatagrid({
        idField :"id",
        fit:true,
        pagination:true,
        singleSelect:true,
        checkOnSelect:false,
        selectOnCheck:false,
        url:'data/newsmsg_data.json',
        saveUrl: 'save_user.php',
        updateUrl: 'update_user.php',
        destroyUrl: 'destroy_user.php',
        fitColumns:true,
        toolbar:'#tb1',
        striped:true,
        frozenColumns:[[{
            field:'ck',
            checkbox:true
        }]],
        columns:[[
            {field:'id',title:'NewsId'},
            {field:'title',title:'标题',editor:{type:'textbox',options:{required:true}}},
            {field:'author',title:'作者'},
            {field:'description',title:'描述',width:100},
            {field:'ctime',title:'创建时间',width:80,editor:{type:'datetimebox',options:{required:true}}},
            {field:'btn',title:'操作',formatter:function(){
                return btn;
            }}
        ]]
    });

    function del_news_msg (){
        var rows =  $news_msg.edatagrid("getChecked");
        $news_msg.edatagrid('destroyRow',rows);
    }

    function btnss(e){
        var row=$news_msg.edatagrid('getSelected');
        console.log(row);
        $win_news.window('open');
    }
</script>
</body>
<script type="text/javascript">
    alert("init");
</script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</html>